<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
    <link rel="stylesheet" type="text/css" href="/meilishuo/b/css/bootstrap.css" /> 
  <title>Document</title>
  <style>
    *{
		margin:0;
		padding:0;
	}
	a{
		text-decoration:none;
	}
	#head{
		width:1200px;
		margin:20px auto;
	}
	#main{
		height:600px;
		background-image:url("img/dlzcbg.png");
	}
	#register{
		padding-bottom:25px;
		width:400px;
		float:right;
		position:relative;
		margin-right:300px;
		margin-top:70px;
		background-color: rgb(255, 236, 235);
		opacity: 0.9;
		/* border:1px solid blue; */
	}
	#register-head{
		height:50px;
		color:black;
		border-bottom:1px solid rgb(204, 204, 204);
	}
	#tip{
		margin-top:15px;
		width:305px;
		margin-left:50px;
		line-height: 30px;
		color: #ff1877;
		font-size:13px;
		background-color:#fff;
		border:1px solid #ffd797;
		display:none;
	}
	#jgfh{
		width:25px;
		height:25px;
		margin:0 10px -10px 10px;
		background:url("img/gwc.png") no-repeat -333px -710px;
		display:inline-block;
	}
	#zhuce{
		font-size:15px;
		font-weight:bold;
		line-height:50px;
		margin-left:50px;
	}
	#shuru input{
		padding-left:5px;
	}
	#shuru #shoujihao{
		height:40px;
		width:300px;
		margin-left:50px;
		margin-top:15px;
		background:none;
		border:1px solid rgb(207, 207, 207);
	}
	#shuru button{
		height:40px;
		width:110px;
		margin-left:50px;
		margin-top:25px;
		color:#fff;
		background-color:rgb(255, 87, 119);
		border:rgb(255, 87, 119);
	}
	#yanzhengma{
		height:40px;
		width:170px;
		margin-left:16px;
		background:none;
		border:1px solid rgb(207, 207, 207);
	}
	#zc{
		height:40px;
		width:306px;
		margin-left:50px;
		margin-top:25px;
		color:#fff;
		background-color:rgb(255, 87, 119);
		border:rgb(255, 87, 119);
	}
	#weixindenglu{
		font-size:12px;
		margin-left:50px;
		margin-top:15px;
	}
	#qita{
		margin-left:250px;
		margin-top:25px;
	}
	#qita a{
		font-size:12px;
		color:#aaa;
	}
	#foot{
		height:250px;
		border-top:1px solid rgb(221, 221, 221);
		margin-top:30px;
		/* border:1px solid red; */
		background-color:rgb(250, 250, 250);
	}
	#foot table{
		width:700px;
		height:200px;
	}
	#foot tr{
		font-size:12px;
		color:rgb(102, 102, 102);
	}
	#foot #title{
		font-size:18px;
		font-weight:bold;
	}
	.guanzhu{
		display:inline-block;
	}
	#xinlang{
		height:18px;
		width:20px;
		background:url(img/guanzh.png) no-repeat;
		margin-bottom:-5px;
		margin-right:3px;
	}
	#Qkongjian{
		height:18px;
		width:20px;
		background:url(img/guanzh.png) no-repeat -28px;
		margin-bottom:-5px;
		margin-right:3px;
	}
	#tengxun{
		height:18px;
		width:20px;
		background:url(img/guanzh.png) no-repeat -56px;
		margin-bottom:-5px;
		margin-right:3px;
	}
	#erweima{
		float:right;
		margin-right:80px;
		margin-top:20px;
		text-align:center;
	}
	#erweima1{
		float:right;
		margin-right:100px;
		margin-top:20px;
		text-align:center;
	}
	#foot_ys{
		width:1200px;
		margin:0 auto;
		border-bottom:1px solid rgb(102, 102, 102);
	}
	#footer{
		text-align:center;
		font-size:12px;
		line-height:20px;
		color:rgb(102, 102, 102);
	}
	#footer a{
		color:rgb(102, 102, 102);
	}
	#footer a:hover{
		color:#f36;
	}
  </style>
 </head>
 <body>
	<div id="head">
		<a href="shou.html"><img src="img/logo.jpg"/></a>
	</div>
	<div id="main">
		<div id="register">
			<div id="register-head">
				<span id="zhuce">新用户注册</span>
			</div>
			<span id="zqsjh">{{msg}}</span>
			<div id="shuru">
				<input  v-model="userInfo.telephone" @blur="checkTel()"   id="shoujihao" type="text" placeholder="手机号码" required="required"/>
				<sapn  v-if="  msg  == '恭喜您 该手机号可以使用'  " >
				    <button  @click="sendCode()"  class="btn  btn-danger">获取验证码</button>
				</sapn>
				<sapn  v-else >
				    <button disabled="disabled" class="btn  btn-danger">获取验证码</button>
				</sapn>
				
				<input  v-model="userInfo.code"  id="yanzhengma" type="text" placeholder="验证码" required="required"/>
				<input  v-model="userInfo.password"  id="shoujihao"  type="text" placeholder="密码" required="required"/>
				<input  v-model="userInfo.reppsw"  id="shoujihao"  type="text" placeholder="重复密码" required="required"/>
				<input  v-model="userInfo.email"  id="shoujihao"  type="text" placeholder="邮箱" required="required"/>
				<input  v-model="userInfo.nickname" id="shoujihao"  type="text" placeholder="昵称" required="required"/>
			</div>
			<div>
				<button @click="register()" class="btn btn-danger btn-block">注册</button>
			</div>
			<div id="weixindenglu">
				<input type="checkbox" checked="checked"/>我已阅读并且同意
				<a>美丽说注册条款</a>
			</div>
			<div id="qita">
				<a href="denglu.html">＜已有账号登录</a>
			</div>
		</div>
	</div>
	<div id="foot">
		<div id="foot_ys">
			<div id="erweima"><h4>美丽说客户端下载</h4><img src="img/kehuduan.png"/></div>
			<div id="erweima1"><h4>美丽说微信服务号</h4><img src="img/fuwuhao.jpg"/></div>
			<table>
				<tr id="title">
					<td>买家帮助</td>
					<td>商家帮助</td>
					<td>关于我们</td>
					<td>关注我们</td>
				</tr>
				<tr>
					<td>新手指南</td>
					<td>供货商招募</td>
					<td>关于美丽说</td>
					<td><div id="xinlang" class="guanzhu"></div>新浪微博</td>
				</tr>
				<tr>
					<td>服务保障</td>
					<td>商家后台</td>
					<td>联系我们</td>
					<td><div id="Qkongjian" class="guanzhu"></div>QQ空间</td>
				</tr>
				<tr>
					<td>常见问题</td>
					<td>规则中心</td>
					<td></td>
					<td><div id="tengxun" class="guanzhu"></div>腾讯微博</td>
				</tr>
				<tr>
					<td>风险监测</td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</div>
		<div id="footer">
			Copyright ©2017 Meilishuo.com
			<a href="#">电信与信息服务业务经营许可证100798号</a>
			<a href="#">经营性网站备案信息</a>
			<br />
            京ICP备11031139号 京公网安备110108006045 客服电话：400-8158-666 文明办网文明上网举报电话：010-82615762  
			<a href="#">违法不良信息举报中心</a>
		</div>
	</div>
	<script type="text/javascript" src="/meilishuo/js/jq.js"></script>
	<script type="text/javascript" src="/meilishuo/js/vue.js"></script>
	<script type="text/javascript">
	       
	        var app = new Vue({
	        	el:"#main",
	        	data:{
	        		userInfo:{},
	        		msg:""
	        	},
	        	methods:{
	        		checkTel:function(){
	        			// 1 验证用户的手机号 输入是否正确
	        			if( app.userInfo.telephone != "" ){
	        				var reg = /^1[3|5|8|9][0-9]{9}$/
	    	        		if(  reg.test( app.userInfo.telephone )  ){
	    	        			// 2 发送请求到后台 验证手机号 是否被注册过  
	    	        			$.get("/meilishuo/user/isExist?telephone="+app.userInfo.telephone,function(backData){
	    	        				 if(backData.code == 10007){ app.msg = "恭喜您 该手机号可以使用";  }
	    	        				 if(backData.code == 10006){ app.msg = "对不起 该手机号已经被占用"; }
	    	        			} );
	    	        			
	    	        		}else{
	    	        			app.msg = "对不起 请输入正确的手机号";	
	    	        		}
	        			}else{
	        				app.msg = "";	
	        			}
	        			
	        		},
	        		sendCode:function(){
	        			$.get("/meilishuo/user/sendCode?tel="+app.userInfo.telephone,function(){
	        				app.msg="发送了 请查收";
	        			});
	        		},
	        		register:function(){
	        			$.post("/meilishuo/user/register",app.userInfo,function(backData){
	        				app.msg = backData.msg;
	        			});
	        		}
	        		
	        	}
	        });
	      
		
	</script>
 </body>
</html>
